<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 102 99"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path data-follow-fill="currentColor" d="M37.927 41.504H16.722a2.846 2.846 0 0 0-2.873 2.875 2.846 2.846 0 0 0 2.873 2.874H37.87a2.846 2.846 0 0 0 2.873-2.874c.058-1.61-1.264-2.875-2.815-2.875Zm0 18.396H16.722a2.846 2.846 0 0 0-2.873 2.874 2.846 2.846 0 0 0 2.873 2.874H37.87a2.846 2.846 0 0 0 2.873-2.874c0-1.61-1.264-2.874-2.815-2.874Z" :fill="_fill"/><path d="M91.369 27.133H77.922v-1.61c0-5.863-4.77-10.577-10.573-10.577H54.82c-.23-3.909-1.838-7.53-4.654-10.29A15.83 15.83 0 0 0 38.96 0c-8.447 0-15.4 6.61-15.86 14.946H10.574C4.711 14.946 0 19.717 0 25.523V87.78c0 5.863 4.77 10.577 10.573 10.577h80.854c5.86 0 10.573-4.771 10.573-10.577V37.768c0-5.864-4.77-10.635-10.631-10.635ZM38.961 5.749c2.701 0 5.23 1.034 7.126 2.989a10.14 10.14 0 0 1 2.93 6.208H28.905c.46-5.116 4.77-9.197 10.056-9.197Zm-28.387 86.86c-2.644 0-4.828-2.185-4.828-4.83V25.582c0-2.644 2.184-4.829 4.827-4.829H67.35c2.643 0 4.827 2.185 4.827 4.829v1.61H57.235c-1.035 0-2.011.172-2.988.402-1.61.46-3.046 1.322-4.31 2.472a11.063 11.063 0 0 0-3.103 5.518c-.173.69-.23 1.437-.23 2.127v50.07c0 .345 0 .632.057.977v.172c.058.288.058.633.115.92 0 .058 0 .115.058.173.057.287.115.632.23.92V91c.115.287.172.575.287.862 0 .058.057.115.057.115.115.23.173.46.288.633H10.574Zm85.622-4.83c0 2.645-2.184 4.83-4.827 4.83H57.177c-2.643 0-4.827-2.185-4.827-4.83v-50.01c0-1.322.518-2.587 1.494-3.507a4.789 4.789 0 0 1 3.333-1.322H91.37c2.643 0 4.827 2.184 4.827 4.829V87.78Z" fill="#fff"/><path data-follow-fill="currentColor" d="M88.898 48.805 72.98 64.728l-8.39-8.393c-1.149-1.15-2.93-1.15-4.08 0-1.149 1.15-1.149 2.932 0 4.082l10.46 10.462a2.916 2.916 0 0 0 4.138 0l17.928-17.935c1.15-1.15 1.15-2.932 0-4.082-1.206-1.207-2.988-1.207-4.137-.057Z" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Group626550 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
